<script setup lang="ts">
import { ElButton } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { Dialog } from '@/components/Dialog'
import { ref } from 'vue'

const { t } = useI18n()
const dialogVisible = ref(false)
const showDialog = () => {
  dialogVisible.value = true
}
</script>

<template>
  <ContentWrap :title="t('fish.camera.title')" :message="t('fish.camera.hint')">
    <img
      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      class="image"
    />
    <div style="padding: 14px">
      <div class="bottom">
        <el-button type="primary" @click="showDialog">测量</el-button>
        <el-button>调试</el-button>
        <el-button>重置</el-button>
      </div>
    </div>

    <Dialog v-model="dialogVisible" :title="t('dialogDemo.dialog')">
      <img
        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
        class="image"
      />
      <template #footer>
        <ElButton @click="dialogVisible = false">{{ t('common.ok') }}</ElButton>
        <ElButton @click="dialogVisible = false">{{ t('common.cancel') }}</ElButton>
      </template>
    </Dialog>
  </ContentWrap>
</template>
